<template>
	<view class="content">
		<view class="address-detail">
			<view class="form-address">
				<u--form labelPosition="left" :model="areaModal" ref="uForm">
					<u-form-item label="收货人" borderBottom labelWidth="70">
						<u--input v-model="areaModal.name" border="none" placeholder="请输入收货人姓名"></u--input>
					</u-form-item>
					<u-form-item label="手机号码" borderBottom labelWidth="70">
						<u--input v-model="areaModal.phone" border="none" placeholder="请输入手机号码"></u--input>
					</u-form-item>
					<u-form-item label="所在地区" borderBottom labelWidth="70" >
						<u--input v-model="areaModal.areaDate" disabled disabledColor="#ffffff" placeholder="请选择所在地区"
							border="none"></u--input>
						<u-icon slot="right" name="map" bold size='20' @click="addressShow = true"></u-icon>
					</u-form-item>
					<u-form-item label="详细地址" borderBottom labelWidth="70">
						<u--input v-model="areaModal.detail" border="none" placeholder="请输入详细地址"></u--input>
					</u-form-item>
					<view class="switch">
						<view class="switch_l">
							设置为默认收货地址
						</view>
						<u-switch v-model="areaModal.isDefault" activeColor="#32B499"></u-switch>
					</view>
				</u--form>
				<view class="submit">
					<view class="submit_button" @click="submit">保存</view>
				</view>
			</view>
		</view>
		<address-picker :show="addressShow" closeOnClickOverlay @confirm='confirmAddress' @cancel='addressShow = false'
			@close='addressShow = false' :address-data="addressData" :indexs="indexs" :areaId="areaId"
			:type="type"></address-picker>
	</view>
</template>
 
<script>
import { getUserInfo } from '@/common/auth';

export default {
	data() {
		return {
			userId: getUserInfo().ypdUser?.userId,
			addressShow: false,
			indexs: [],
			areaId: [],
			addressData: [],
			type: 3, //1-省，2-省市，3-省市区
			areaModal: {
				name: '',
				phone: '',
				areaDate: '',
				province: '',
				city: '',
				area: '',
				isDefault: false,
				isEdit: false,
				isOrderDetail: false,
				isOrderSure: false,
			},
		}
	},
	onLoad(options) {
		const { title, detail } = options;
		this.title = title
		if (detail) {
			let obj = JSON.parse(detail)
			obj.areaDate = `${obj.province}/${obj.city}/${obj.area}`
			this.addressData = [obj.province, obj.city, obj.area]
			obj.isDefault == 1 ? obj.isDefault = true : obj.isDefault = false
			this.areaModal = obj

		}
	},
	methods: {
		confirmAddress(val) {
			let arr = val.value
			this.areaModal.areaDate = arr.join('/')
			this.areaModal.province = arr[0]
			this.areaModal.city = arr[1]
			this.areaModal.area = arr[2]
			this.addressShow = false
		},
		submit() {
			const { areaModal, userId, title } = this;
			let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/);
			if (areaModal.name == '') return this.$toast('请填写收货人')
			if (areaModal.phone == '') return this.$toast('请填写手机号')
			if (!reg.test(areaModal.phone)) return this.$toast('请填写正确的手机号')
			if (areaModal.areaDate == '') return this.$toast('请选择省市区信息')
			if (areaModal.detail == '') return this.$toast('请完善详细地址')
			const param = {
				userId,
				id: areaModal.id,
				phone: areaModal.phone,
				name: areaModal.name,
				province: areaModal.province,
				city: areaModal.city,
				area: areaModal.area,
				isDefault: areaModal.isDefault === true ? 1 : 0,
				detail: areaModal.detail,
			};
			if (title == '新增收货地址') {
				delete param.id;
				this.$request.miniAddAddress(param).then(res => {
					if (res.code == 200) {
						this.$toast('添加成功!')
					}
				});
			} else {
				this.$request.miniUpdateAddress(param).then(res => {
					if (res.code == 200) {
						this.$toast('修改成功!')
					}
				});
			}
			setTimeout(() => {
				this.$goPath(1)
			}, 800)
		},
	},
}
</script>

<style scoped>
.address-detail {
	font-size: 30rpx;
	height: 100%;
	padding: 24rpx 24rpx 0;
	box-sizing: border-box;
}

.form-address {
	height: 100%;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
}

.switch {
	margin-top: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.submit {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 64rpx 30rpx 88rpx 30rpx;
}

.submit .submit_button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 500rpx;
	height: 70rpx;
	background: #32B499;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}
</style>